@import "style.scss";
.mui-segmented-control.mui-scroll-wrapper {
    height: px2rem(140);
}

.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: px2rem(140);
}

.content {
    padding-top: px2rem(44);
    .item-wapper {
        background-color: #fff;
        padding: px2rem(15);
        .desc {
            padding-bottom: px2rem(15);
            font-size: px2rem(15);
            color: #3E3E3E;
            line-height: px2rem(23);
            .title {
                font-weight: bold;
            }
        }
        .img-wapper {
            display: flex;
            .item-item {
                overflow: hidden;
                border-radius: px2rem(5);
                width: px2rem(140);
                height: px2rem(110);
                background-color: #eee;
                display: flex;
                align-items: center;
                margin-right: px2rem(15);
                margin-bottom: px2rem(15);
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
            .record-wapper{
                padding-top: px2rem(15);
                text-align: right;
                .record-item{
                    border-radius: px2rem(10)  px2rem(10) px2rem(10) 0;
                    background-color: #F9F9F9;
                    height: px2rem(40);
                    box-shadow: 0 0 1px rgba(#000,.3);
                    color: #919191;
                    font-size: px2rem(16);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 px2rem(15);
                    margin-bottom: px2rem(15);
                    
                    .record-icon{
                        width: px2rem(15);
                        height: px2rem(15);
                        margin-right: px2rem(15);
                    }
                }
            }
    }
}

.orderUser {
    .item {
        padding-left: px2rem(15);
        height: px2rem(44);
        display: flex;
        align-items: center;
        background-color: #fff;
        overflow: hidden;
        position: relative;
        .item-title {
            display: flex;
            align-items: center;
            height: 100%;
            overflow: hidden;
            position: relative;
            flex: 1;
            justify-content: space-between;
            .desc {
                margin-right: px2rem(15);
                font-size: px2rem(14);
                color: #ABABAB;
                position: relative;
            }
            .ipone {
                margin-right: px2rem(15);
                font-size: px2rem(14);
                color: #357AFF;
                .mui-icon {
                    font-size: px2rem(20);
                }
            }
        }
    }
}

.schedule {
    background: #fff;
    padding: px2rem(15);
    .button-wapper {
        display: flex;
        justify-content: space-between;
        .done,
        .over {
            width: 48%;
            height: px2rem(45);
            border-radius: px2rem(5);
            line-height: px2rem(45);
            text-align: center;
            color: #fff;
            font-size: px2rem(14);
        }
        .done {
            background-color: #2A83FF;
            box-shadow: 0 px2rem(1) px2rem(3) rgba(#2A83FF, .5);
        }
        .over {
            background-color: #FF5D5D;
            box-shadow: 0 px2rem(1) px2rem(3) rgba(#FF5D5D, .5);
        }
    }
    
    .fanhui{
            height: px2rem(45);
            border-radius: px2rem(5);
            line-height: px2rem(45);
            text-align: center;
            color: #fff;
            font-size: px2rem(16);
         background-color: #2A83FF;
         box-shadow: 0 px2rem(1) px2rem(3) rgba(#2A83FF, .5);
    }
    .flowPath-wapper {
        position: relative;
        .schedule-shuxian {
            position: absolute;
            width: px2rem(1);
            height: 100%;
            background-color: #E2E2E2;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .left-icon-red {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                top: px2rem(1);
                left: px2rem(-5);
                width: px2rem(10);
                height: px2rem(10);
                background-color: #FF5D5D;
                border-radius: px2rem(10);
                z-index: 2;
            }
        }
        .left-icon-hui {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                top: px2rem(1);
                left: px2rem(-5);
                width: px2rem(10);
                height: px2rem(10);
                background-color: #C6C6C6;
                border-radius: px2rem(10);
                z-index: 2;
            }
        }
        .list-item {
            padding-left: px2rem(15);
            .item-time {
                color: #919191;
                font-size: px2rem(12);
                margin-bottom: px2rem(5);
            }
            .item-title {
                font-size: px2rem(13);
                padding-bottom: px2rem(15);
                margin-bottom: px2rem(15);
                span {
                    color: #357AFF;
                }
            }
        }
    }
}

.staff-content {
    padding-top: px2rem(44);
    .staff-list {
        margin-top: px2rem(15);
        background-color: #fff;
        .list-item{
            padding: px2rem(15);
            display: flex;
            align-items: center;
            position: relative;
            &::after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: #E2E2E2;
            }
            .item-imgUrl{
                width: px2rem(40);
                height: px2rem(40);
                margin-right: px2rem(20);
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    box-shadow: 0 0 px2rem(1) rgba(#000,.3);                }
            }
            .item-icon{
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                right: px2rem(15);
                width: px2rem(40);
                height: px2rem(40);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.guideline{
    background: #fff;
    padding: px2rem(15);
    .guideline-title{
        text-align: center;
        color: #333;
        font-size: px2rem(16);
        font-weight: bold;
        padding-bottom: px2rem(5);
        margin-bottom: px2rem(5);
    }
    .guideline-text{
        color: #666;
    }
}


.mrk-record{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: px2rem(400);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    .record{
        width: px2rem(150);
        height: px2rem(150);
        background-color: rgba(#000,.5);
        border-radius: px2rem(10);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 100;
        .record-img{
            width: px2rem(80);
        }
        .record-span{
            color: #fff;
            font-size: px2rem(16);
        }
    }
}